<!DOCTYPE html>
<html>
<head>
	<title>放大镜事件</title>
</head>
<style type="text/css">
#zoom{width: 512px;height: 288px;position: relative;}
#small{widows: inherit;height: inherit;position: relative;}
#small img{display: block;widows: inherit;height: inherit;}
#mask{width: 100px;height: 100px;position: absolute;background:rgba(255,255,255,0.8);}
#big{position: absolute;top:0;left: 522px;overflow: hidden;}
#big img{position: absolute;top: 0;left: 0;}

</style>
<body>
<div id="zoom">
	<div id="small">
		<img src="C:\Users\14129\Pictures/f2deb48f8c5494ee9cb61e1229f5e0fe99257e20 (1).jpg">
	</div>
	<div id="big">
		<img src="C:\Users\14129\Pictures/QQ图片20190624202339.jpg">
	</div>
</div>

</body>
<script type="text/javascript">
var small = $("#small")[0];
var spic = $("#small img")[0];
var big = $("#big img")[0],bpic = $("#big img")[0],
mask,maxW,maxH,bpic,nleft,ntop;
small.addEventListener("mouseenter",function(){
	mask = document.createElement("div");
	mask.id="mask";
	this.appendChild(mask);
	maxW=small.offsetWidth-mask.offsetWidth;
	maxH = small.offsetHeight-mask.offsetHeight;
	big.style.display = "blick";
	big.style.width = mask.offsetWidth*zoom+"px";
	big.style.height = mask.offsetHeight*zoom+"px";
	bpic.style.width = this.offsetWidth*zoom+"px";
	bpic.style.height = this.offsetHeight*zoom+"px";
	
})
small.addEventListener("mousemove",function(e){
	//放大镜的left，top使鼠标处于放大镜中心位置
	var nleft = e.clientX-small.offsetLeft-mask.offsetWidth/2;
	var ntop = e.clientX-small.offsetTop-mask.offsetHeight/2;
	//放大镜可移动范围，限制在小图显示区域内
	if (nleft<0) {nleft=0}
	if (nleft>maxW) {nleft=maxW}
	if (ntop<0) {ntop = 0};
	if (ntop>maxH) {ntop = maxH}

	mask.style.top = ntop+"px";
	mask.style.left = nleft+"px";
	bpic.style.top = -ntop*zoom+"px";
	bpic.style.left = -ntop*zoom+"px";
	
})
small.addEventListener("mouseleave",function(){
	//this.removeChild(mask);
})



/*
1.小图大图
2.小图上面有一个半透明的遮罩（放大镜：绝对定位，半透明）
--放大镜移动范围：
----水平：0~小图的宽-放大镜的宽
----垂直：0~小图的高-放大镜的高
比如：小图宽高400，放大镜100
if(left<0) left=0;
if(left>300) left=300;
if(top<0) top=0;
if(top>300) top=300

f

数组取最大
Math.max(arr)错的

var arr = [1,2,348,64,19];
console.log(Math.max.apply(null,arr));
console.log(Math.max(...arr));

left=Math.min(300,Math.max(0,left));
max:left<0,取0，min:0
max:left>0,取left,min:left>300,取300,left<300,取left

--放大镜跟随鼠标：
----水平：鼠标当前位置-小图的offsetLeft-放大镜一半宽度
----垂直：鼠标当前位置-小图的offsetTop-放大镜一般高度
3.右侧大图，绝对定位
----大图大小：小图宽高*缩放倍数
----移动距离：鼠标移动的距离*缩放倍数*-1
----右侧显示图片大小：放大镜的大小*缩放倍数
参数：缩放倍数
 */

function $(selector){
	return document.querySelectorAll(selector);
}



</script>
</html>